<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        a{text-decoration: none;font-size: 14px;text-align: center}
        a:link{color:#cccccc }
        a:hover{color: white}
        .center{width: 1200px;margin: 0 auto}
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-select .el-input {
            width: 130px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="app" >
    <el-container>
        <my-header></my-header>
        <el-main class="center" >
        <el-row  gutter="20">
            <el-col :span="4">
                <el-menu
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        text-color="rgb(39,137,150)"
                        @select="handleTab">
                    <el-menu-item index="">
                        <span slot="title">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="1">
                        <span slot="title">修改信息</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <span slot="title">修改密码</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <span slot="title">我的会员</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <span slot="title">我的发票</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <span slot="title"  @click="location.href='cart.html'">我的购物车</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <span slot="title" @click="location.href='blog.html'">我的社区</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-card  v-show="menuIndex==''" style="height: 500px">
                <el-descriptions  title="用户信息" :column="4" direction="vertical" border>
                    <el-descriptions-item label="用户名">{{user.username}}</el-descriptions-item>
                    <el-descriptions-item label="昵称">{{user.nickName}}</el-descriptions-item>
                    <el-descriptions-item label="手机号":span="2">{{user.phone}}</el-descriptions-item>
                    <el-descriptions-item label="邮箱">{{user.email}}</el-descriptions-item>
                    <el-descriptions-item label="会员等级">{{user.level}}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-col span="20">
                <el-card  v-show="menuIndex=='1'" >
                    <el-form label-width="100px">
                        <el-form-item label="头像">
                            <img  :src="user.imgUrl"
                                  style="width: 80px;height: 80px;
                            border-radius: 10px;float: left">
                            <el-upload style="float: left"
                                       action="/v1/uploads/"
                                       name="file"
                                       limit="1"
                                       list-type="picture-card"
                                       :on-success="handleSuccess"
                                       :on-preview="handlePictureCardPreview"
                                       :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%":src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                        <el-form-item label="昵称" >
                            <el-input placeholder="请输入昵称" v-model="user.nickName" style="width: 200px"  :rules="{required: true, message: '昵称不能为空', trigger: 'blur'}"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="年龄">
                            <el-input v-model="user.age" autocomplete="off"  style="width: 200px" :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="user.gender">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="手机号码" >
                            <el-input v-model.number="user.phone" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item
                                prop="email"
                                label="邮箱"
                                :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                        >
                            <el-input v-model="user.email" style="width: 200px"></el-input>
                        </el-form-item>
                            <el-button style="margin-left: 80px" type="primary" @click="save()">保存信息</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card  v-show="menuIndex=='2'" style="height: 500px">
                    <el-form label-width="100px">
                        <el-form-item label="旧密码" prop="pass">
                            <el-input type="password" v-model="user.password" style="width: 200px" autocomplete="off"></el-input>
                        </el-form-item>
                            <el-form-item label="密码" prop="pass">
                                <el-input type="password" v-model="user.password" style="width: 200px" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="checkPass">
                                <el-input type="password" v-model="user.checkPass" style="width: 200px" autocomplete="off"></el-input>
                            </el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">修改密码</el-button>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        </el-main>
        <el-footer style="margin: 0;padding: 0">
            <div style="height: 330px;background-color: #727272;color: white;margin: 0 auto;padding: 0">
                <el-row style="width: 1200px;margin: 0 auto" >
                    <el-col span="4">
                        <p style="font-size: 24px;padding-left: 20px;margin-bottom: 0"><i class="el-icon-phone" ></i>服务热线</p>
                        <p style="margin-top: 5px;padding-left: 30px">400  679  6699</p>
                        <p style="font-size: 24px;padding-left: 20px;margin-bottom: 0"><i class="el-icon-message" ></i>意见反馈</p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">关于鹿途</p>
                        <p><a href="/info.html">鹿途简介</a></p>
                        <p><a href="/info.html">法律声明</a></p>
                        <p><a href="/info.html">网站地图</a></p>
                        <p><a href="/info.html">用户协议与隐私条款</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">加盟合作</p>
                        <p><a href="/info.html">合作加盟</a></p>
                        <p><a href="/info.html">商旅合作</a></p>
                        <p><a href="/info.html">门票合作</a></p>
                        <p><a href="/info.html">其他合作</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">联系我们</p>
                        <p><a href="/info.html">联系我们</a></p>
                        <p><a href="/info.html">投诉建议</a></p>
                        <p><a href="/info.html">友情链接</a></p>
                    </el-col>
                    <el-col span="4">
                        <p style="font-weight: bold">旅行服务</p>
                        <p><a href="/info.html">旅游攻略</a></p>
                        <p><a href="/info.html">旅游特价</a></p>
                        <p><a href="/info.html">酒店预订</a></p>
                    </el-col>
                    <el-col span="4">
                        <a href="/" style="font-size: 36px;margin: 0; padding: 0;float: right">
                            <img src="imgs/logo.png" width="150px" height="150px">
                        </a>
                    </el-col>
                </el-row>
                <el-divider ></el-divider>
                <div style="width: 800px; color: aliceblue;font-size: 12px;margin: 0 auto">
                    <p style="margin-top: 0">Copyright © 2002-2028  版权所有  鹿途网络科技股份有限公司</p>
                    <p>经营许可证编号：合字B2-20180018      备案序号：苏ICP备09033674号 苏公网安备32059002001063号     旅行社业务许可证：L-JS-CJ00076</p>
                    <p>国家文旅部全国旅游投诉热线：拨打12345，或登录<a style="font-size: 12px">全国旅游网络投诉举报平台</a></p>
                </div>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {

                dialogImageUrl: '',
                dialogVisible: false,
                user: localStorage.user ? JSON.parse(localStorage.user) : null,
                url:"",
                menuIndex:"",
                ruleForm: {
                    password: '',
                    checkPass: '',
                    age: ''
                },
                rules: {
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    age: [
                        { validator: checkAge, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSuccess(response,file,fileList){//当上传成功时此方法会执行
                // response==file.response 代表服务器响应的ResultVo
                v.url = response.data;
            },
            save() {
                let u = {id:v.user.id,nickName:v.user.nickName,age:v.user.age,
                    password:v.user.password,gender:v.user.gender,phone:v.user.phone,email:v.user.email};
                if (v.url!=""){//选择了图片    /2023/06/1/xxxx.jpg
                    u.imgUrl = v.url;
                }
                console.log(u);
                //发请求把新的昵称和图片路径保存进数据库中
                axios.post("/v1/users/update",u).then(function (response) {
                    if (response.data.code==1){
                        if (v.url!=""){
                            v.user.imgUrl = v.url;//把图片路径赋值给当前登录的用户对象
                        }
                        //把最新的用户信息保存到localStorage里面
                        localStorage.user = JSON.stringify(v.user);
                        location.reload();//刷新页面
                    }
                })
            },

            handleRemove(file, fileList) {
                v.url="";
                console.log(file, fileList);
                //发出删除文件的请求   file.response上传成功时服务器响应的内容ResultVO
                console.log(file.response);
                axios.get("/v1/upload/remove?url=" + file.response.data).then(function () {
                    console.log("服务器文件删除完成!");
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleTab(key,keyPath){
                v.menuIndex=key;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        created: function () {


        }
    })


</script>
</html>